'use client'

import { useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { BarChart, CreditCard, Settings, ChevronDown, ChevronRight, Users } from 'lucide-react'

const menuItems = [
  {
    icon: BarChart,
    name: '数据概览',
    href: '/',
    subItems: [
      { name: '用户分析', href: '/' },
      { name: '妆造分析', href: '/makeup-analysis' },
      { name: '视频分析', href: '/video-analysis' },
    ]
  },
  { icon: Users, name: '用户管理', href: '/users' },
  { icon: CreditCard, name: '计费管理', href: '/billing' },
  { icon: Settings, name: '系统设置', href: '/settings' },
]

export default function Sidebar() {
  const [isOpen, setIsOpen] = useState(true)
  const [expandedItem, setExpandedItem] = useState('数据概览')
  const pathname = usePathname()

  // 检查当前路径是否是某个菜单项的子项
  const isSubItemActive = (item: typeof menuItems[0]) => {
    return item.subItems?.some(subItem => subItem.href === pathname)
  }

  return (
    <aside
      className={`bg-gradient-to-b from-gray-900 to-gray-800 text-white h-screen flex flex-col transition-all duration-300 ease-in-out border-r border-gray-700/50 ${
        isOpen ? 'w-64' : 'w-20'
      }`}
    >
      <div className="flex items-center justify-between p-4 border-b border-gray-700/50 bg-gray-900/50 backdrop-blur-sm">
        <h2 className={`font-bold ${isOpen ? 'text-xl' : 'text-xs'} bg-gradient-to-r from-blue-400 to-cyan-300 text-transparent bg-clip-text`}>
          {isOpen ? '管理系统' : 'MS'}
        </h2>
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="text-gray-400 hover:text-white hover:bg-gray-700/50 p-1.5 rounded-lg transition-all duration-200 active:scale-95"
        >
          {isOpen ? '<<' : '>>'}
        </button>
      </div>
      <nav className="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-700 scrollbar-track-transparent">
        <ul className="py-2 px-2 space-y-1">
          {menuItems.map((item) => (
            <li key={item.name} className="relative group">
              {item.subItems ? (
                <div>
                  <button
                    onClick={() => setExpandedItem(expandedItem === item.name ? '' : item.name)}
                    className={`w-full flex items-center justify-between py-2.5 px-3 rounded-lg transition-all duration-200 ${
                      isSubItemActive(item) ? 'bg-gray-700/70 text-white' : 'hover:bg-gray-700/50 text-gray-300 hover:text-white'
                    }`}
                  >
                    <div className="flex items-center">
                      <item.icon className={`h-5 w-5 min-w-[1.25rem] transition-colors duration-200 ${
                        isSubItemActive(item) ? 'text-blue-400' : 'text-gray-400 group-hover:text-blue-400'
                      }`} />
                      {isOpen && <span className="ml-3 font-medium">{item.name}</span>}
                    </div>
                    {isOpen && (
                      <ChevronDown className={`h-4 w-4 transition-transform duration-200 ${
                        expandedItem === item.name ? 'rotate-0' : '-rotate-90'
                      }`} />
                    )}
                  </button>
                  {isOpen && expandedItem === item.name && (
                    <ul className="mt-1 ml-2 space-y-1 border-l border-gray-700/50">
                      {item.subItems.map((subItem) => (
                        <li key={subItem.name}>
                          <Link href={subItem.href}>
                            <span
                              className={`flex items-center py-2 px-4 rounded-lg transition-all duration-200 ${
                                pathname === subItem.href 
                                  ? 'bg-blue-500/10 text-blue-400' 
                                  : 'text-gray-400 hover:bg-gray-700/30 hover:text-white'
                              }`}
                            >
                              <div className={`w-1.5 h-1.5 rounded-full mr-3 ${
                                pathname === subItem.href ? 'bg-blue-400' : 'bg-gray-600'
                              }`} />
                              {subItem.name}
                            </span>
                          </Link>
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              ) : (
                <Link href={item.href}>
                  <span
                    className={`flex items-center py-2.5 px-3 rounded-lg transition-all duration-200 ${
                      pathname === item.href 
                        ? 'bg-gray-700/70 text-white' 
                        : 'text-gray-300 hover:bg-gray-700/50 hover:text-white'
                    }`}
                  >
                    <item.icon className={`h-5 w-5 min-w-[1.25rem] transition-colors duration-200 ${
                      pathname === item.href ? 'text-blue-400' : 'text-gray-400 group-hover:text-blue-400'
                    }`} />
                    {isOpen && <span className="ml-3 font-medium">{item.name}</span>}
                  </span>
                </Link>
              )}
            </li>
          ))}
        </ul>
      </nav>
    </aside>
  )
}

